<template>
  <div>
    <div class="segmented-header">
      <ElSegmented v-model="segmented" :options="segmentedOptions" block />
    </div>
    <div class="segmented-content">
      <component :is="segmentedSlots" />
    </div>
  </div>
</template>

<script setup>
import Project from "./Project/index.vue";
import Cache from "./Cache/index.vue";
import Performance from "./Performance/index.vue";
import { computed, ref } from "vue";
const segmented = ref("Cache");
const segmentedOptions = ref([
  { label: "项目结构", value: "Project" },
  { label: "内存情况", value: "Cache" },
  { label: "性能监控", value: "Performance" },
]);
const compMap = { Project, Cache, Performance };
const segmentedSlots = computed(() => compMap[segmented.value]);
</script>

<style scoped>
.segmented-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
}
.segmented-content {
  margin-top: 20px;
}
</style>
